<!DOCTYPE html>
<html>
<head>
    <title><%=title%></title>
    <!--<meta name="viewport" content="width=device-width, initial-scale=1.0">-->
    <link href="/css/bootstrap.min.css" rel="stylesheet" media="screen">
    <link href="/css/bootstrap-responsive.css" rel="stylesheet" media="screen">
    <link rel="stylesheet" type="text/css" href="/css/style.css">
    <script src="/lib/jq/jquery-2.1.1.min.js"></script>
    <script src="/lib/jq/bootstrap.min.js"></script>
</head>
<body>
<div class="head">
    <h2 class="headlogo">车友汇</h2>
    <div class="headsearch">
        <form name="search" style="padding-top: 3px" id="keywordsearch" method="post" action="/">
            <input type="text" class="searchtxt" style="width:60%;border:2px solid #2DB8AB;padding-top:10px;height:19px;padding-left:5px;color:#2DB8AB" name="search" value="">

            <input type="submit" class="search_btn" style="margin-bottom:8px;background-color:#2DB8AB;height:38px;width:15%;border:1px solid #2DB8AB;" value="搜索" class="button">
        </form>
    </div>
</div>
<div class="menu">
    <div class="nav_div">
        <ul class="menu_ul">
            <%for(var i =0;i<menu.length;i++){%>
            <%if(i==0){%>
            <li class="active1" id="<%=menu[i].header%>" style="background-color: #2DB8AB;">
                <a class="navbar__item">
                    <span class="nav-label"><%=menu[i].header%></span>
                </a>
            </li>
            <%}else{%>
            <li class="" id="<%=menu[i].header%>">
                <a class="navbar__item">
                    <span class="nav-label"><%=menu[i].header%></span>
                </a>
            </li>
            <%}}%>
        </ul>
    </div>
</div>
<div class="Query_area">
    <div class="area">
        <div class="area_title">类别：</div>
        <ul class="type_ul">
            <li class="active_type" id="0,<%=sid%>" style="background-color: #2bb8aa;padding: 1px;border: 1px solid #2bb8aa;border-radius:3px;">
                <a style="text-decoration:none;">全部</a>
            </li>
            <%for(var i=0;i<menu[0].content.length;i++){%>
            <li class="" id="<%=menu[0].content[i].servid%>,<%=sid%>">
                <a style="text-decoration:none;"><%=menu[0].content[i].name%></a>
            </li>
            <%}%>

        </ul>
    </div>
</div>
<input type="hidden" id="hidden" value="0,<%=sid%>">
<div class="Query_area">
    <div class="area">
        <div class="area_title">区域：</div>
        <ul class="area_ul">
            <li class="act" id="0" style="background-color: #2bb8aa;padding: 1px;border: 1px solid #2bb8aa;border-radius:3px;">
                <a style="text-decoration:none;">全部</a>
            </li>
            <%for(var i=0;i<citys.length;i++){%>
            <li class="" id="<%=citys[i].cid%>">
                <a style="text-decoration:none;"><%=citys[i].city%></a>
            </li>
            <%}%>
        </ul>
    </div>
</div>
<div class="order" style="height: <%=height%>px">
    <%for(var i=0;i<order.length;i++){%>
    <%if(i%2==0){%>
    <div style="padding-left: 4%;padding-right: 4%;width: 42%;float: left;margin-bottom: 15px;">
        <div>
            <img style="height: 265px;width: 420px;" src="http://114.215.137.61:8100/<%=order[i].img%>">
        </div>
        <div style="padding: 10px;border: 1px solid #E6E6E6">
            <b><h4><%=order[i].lname%></h4></b>
            <span style="color: #9A9A9A;margin-left: 10px"><%=order[i].describe.substring(0,27)%></span><br>
            <span style="color:#F76222;font-size: 16px"><b>￥<h2 style="display : inline"><%=order[i].price%></h2></b></span>
        </div>
    </div>
    <%}else if(i%2==1){%>
    <div style="padding-left: 4%;padding-right: 2%;width: 42%;float: left;margin-bottom: 15px;">
        <div>
            <img style="height: 265px;width: 420px;" src="http://114.215.137.61:8100/<%=order[i].img%>">
        </div>
        <div style="padding: 10px;border: 1px solid #E6E6E6">
            <b><h4><%=order[i].lname%></h4></b>
            <span style="color: #9A9A9A;margin-left: 10px"><%=order[i].describe.substring(0,27)%></span><br>
            <span style="color:#F76222;font-size: 16px"><b>￥<h2 style="display : inline"><%=order[i].price%></h2></b></span>
        </div>
    </div>
        <%}%>
    <%}%>
</div>
<%if(order.length>10){%>
<div class="pagination" style="text-align: center;">
    <ul>
        <li class="active"><a href="#"><</a></li>
        <li><a href="#">1</a></li>
        <li><a href="#">2</a></li>
        <li><a href="#">3</a></li>
        <li><a href="#">4</a></li>
        <li><a href="#">5</a></li>
        <li><a href="#">></a></li>
    </ul>
</div>
<%}%>
</body>
</html>
<script>
    $(function () {
        //切换菜单
        $('.menu_ul li').click(function (e) {
            $('.active1').css("color","#000");
            $('.menu_ul li').css("width", "100px");
            $('.menu_ul li').css("height", "37px");
            $('.menu_ul li').css("line-height","37px");
            $('.menu_ul li').css("background-color","#fff");

            $(this).addClass('active1');
            $(this).css("background-color", "#2DB8AB");
            $(this).css("color", "#fff");
            var sid = this.id;
            $.post('/serviceType',{sid:sid},function(result){
                var html1="";
                html1+='<li class="active_type" id="0,'+result.sid+'" style="background-color: #2bb8aa;padding: 1px;border: 1px solid #2bb8aa;border-radius:3px;">';
                html1+='<a style="text-decoration:none;">全部</a></li>';
                console.log(result.types);
                for(var i=0;i<result.types.length;i++){
                    html1+='<li class="" id="'+result.types[i].servid+','+result.sid+'">';
                    html1+='<a style="text-decoration:none;">'+result.types[i].name+'</a></li>';
                }
                $('.type_ul').html(html1);
                var html="";
                if(result.order.length==0){
                    var html='<div style="padding-left: 4%;padding-right: 4%;width: 42%;float: left;margin-bottom: 15px;"><h4>没有查找到相关商品</h4></div>'
                    $('.order').html(html);
                }else{
                    for(var i=0;i<result.order.length;i++){
                        if(i%2==0){
                            html+='<div style="padding-left: 4%;padding-right: 4%;width: 42%;float: left;margin-bottom: 15px;"><div>';
                            html+='<img style="height: 265px;width: 420px;" src="http://114.215.137.61:8100/'+result.order[i].img+'"></div>';
                            html+='<div style="padding: 10px;border: 1px solid #E6E6E6">';
                            html+='<b><h4>'+result.order[i].gname+'</h4></b>';
                            html+='<span style="color: #9A9A9A;margin-left: 10px">'+result.order[i].describe.substring(0,27)+'</span><br>';
                            html+='<span style="color:#F76222;font-size: 16px"><b>￥<h2 style="display : inline">'+result.order[i].price+'</h2></b></span></div></div>';
                        }else{
                            html+='<div style="padding-left: 4%;padding-right: 2%;width: 42%;float: left;margin-bottom: 15px;"><div>';
                            html+='<img style="height: 265px;width: 420px;" src="http://114.215.137.61:8100/'+result.order[i].img+'"></div>';
                            html+='<div style="padding: 10px;border: 1px solid #E6E6E6">';
                            html+='<b><h4>'+result.order[i].gname+'</h4></b>';
                            html+='<span style="color: #9A9A9A;margin-left: 10px">'+result.order[i].describe.substring(0,27)+'</span><br>';
                            html+='<span style="color:#F76222;font-size: 16px"><b>￥<h2 style="display : inline">'+result.order[i].price+'</h2></b></span></div></div>';
                        }
                        $('.order').html(html);
                        $("#hidden").val("0,"+result.sid);
                    }

                }
            });
        });
        //切换城市
        $(document).on("click",".area_ul li",function() {
            var hidden=$("#hidden")[0].value;
            var servid=hidden.split(',')[0];
            var serv=hidden.split(',')[1];
            var cityid=this.id;
            $('.act').removeClass;
            $('.area_ul li').css("background-color","#fff");
            $('.area_ul li').css("border","0");
            $(this).addClass('act');
            $(this).css("background-color", "#2DB8AB");
            $(this).css("padding", "1px");
            $(this).css("border", "1px solid #2bb8aa");
            $(this).css("border-radius", "3px");
            $.post('/chooseCity',{servid:servid,serv:serv,cityid:cityid},function(result){
                var html="";
                if(result.order.length==0){
                    var html='<div style="padding-left: 4%;padding-right: 4%;width: 42%;float: left;margin-bottom: 15px;"><h4>没有查找到相关商品</h4></div>'
                    $('.order').html(html);
                }else{
                    for(var i=0;i<result.order.length;i++){
                        if(i%2==0){
                            html+='<div style="padding-left: 4%;padding-right: 4%;width: 42%;float: left;margin-bottom: 15px;"><div>';
                            html+='<img style="height: 265px;width: 420px;" src="http://114.215.137.61:8100/'+result.order[i].img+'"></div>';
                            html+='<div style="padding: 10px;border: 1px solid #E6E6E6">';
                            html+='<b><h4>'+result.order[i].gname+'</h4></b>';
                            html+='<span style="color: #9A9A9A;margin-left: 10px">'+result.order[i].describe.substring(0,27)+'</span><br>';
                            html+='<span style="color:#F76222;font-size: 16px"><b>￥<h2 style="display : inline">'+result.order[i].price+'</h2></b></span></div></div>';
                        }else{
                            html+='<div style="padding-left: 4%;padding-right: 2%;width: 42%;float: left;margin-bottom: 15px;"><div>';
                            html+='<img style="height: 265px;width: 420px;" src="http://114.215.137.61:8100/'+result.order[i].img+'"></div>';
                            html+='<div style="padding: 10px;border: 1px solid #E6E6E6">';
                            html+='<b><h4>'+result.order[i].gname+'</h4></b>';
                            html+='<span style="color: #9A9A9A;margin-left: 10px">'+result.order[i].describe.substring(0,27)+'</span><br>';
                            html+='<span style="color:#F76222;font-size: 16px"><b>￥<h2 style="display : inline">'+result.order[i].price+'</h2></b></span></div></div>';
                        }
                        $('.order').html(html);
                    }
                }
            });
        });
        //切换类别
        $(document).on("click",".type_ul li",function(){
            var rid=this.id;
            var servid=rid.split(',')[0];
            var serv=rid.split(',')[1];
            $('.active_type').removeClass;
            $('.type_ul li').css("background-color","#fff");
            $('.type_ul li').css("border","0");
            $(this).addClass('active_type');
            $(this).css("background-color", "#2DB8AB");
            $(this).css("padding", "1px");
            $(this).css("border", "1px solid #2bb8aa");
            $(this).css("border-radius", "3px");
            $('.active span').css("color","#fff");

            $.post('/chooseType',{servid:servid,serv:serv},function(result){
                var html="";
                if(result.order.length==0){
                    var html='<div style="padding-left: 4%;padding-right: 4%;width: 42%;float: left;margin-bottom: 15px;"><h4>没有查找到相关商品</h4></div>'
                    $('.order').html(html);
                }else{
                    for(var i=0;i<result.order.length;i++){
                        if(i%2==0){
                            html+='<div style="padding-left: 4%;padding-right: 4%;width: 42%;float: left;margin-bottom: 15px;"><div>';
                            html+='<img style="height: 265px;width: 420px;" src="http://114.215.137.61:8100/'+result.order[i].img+'"></div>';
                            html+='<div style="padding: 10px;border: 1px solid #E6E6E6">';
                            html+='<b><h4>'+result.order[i].gname+'</h4></b>';
                            html+='<span style="color: #9A9A9A;margin-left: 10px">'+result.order[i].describe.substring(0,27)+'</span><br>';
                            html+='<span style="color:#F76222;font-size: 16px"><b>￥<h2 style="display : inline">'+result.order[i].price+'</h2></b></span></div></div>';
                        }else{
                            html+='<div style="padding-left: 4%;padding-right: 2%;width: 42%;float: left;margin-bottom: 15px;"><div>';
                            html+='<img style="height: 265px;width: 420px;" src="http://114.215.137.61:8100/'+result.order[i].img+'"></div>';
                            html+='<div style="padding: 10px;border: 1px solid #E6E6E6">';
                            html+='<b><h4>'+result.order[i].gname+'</h4></b>';
                            html+='<span style="color: #9A9A9A;margin-left: 10px">'+result.order[i].describe.substring(0,27)+'</span><br>';
                            html+='<span style="color:#F76222;font-size: 16px"><b>￥<h2 style="display : inline">'+result.order[i].price+'</h2></b></span></div></div>';
                        }
                        $('.order').html(html);
                        $("#hidden").val(servid+","+serv);
                    }

                }
            });
        })
    });
</script>
